{% extends 'base.html' %}

{% block content %}
    <div class="me-5 mb-5">
        <div class="fs-1 fw-bold">Регистрация</div>
        <form class="needs-validation" novalidate>
            <div class="mt-4">
                <label for="mail" class="form-label fs-4">Email</label>
                <input type="email" class="form-control fs-4" id="mail" style="max-width: 35rem;" required />
                <div class="invalid-feedback">Введите электронную почту аккаунта</div>
            </div>
            <div class="mt-4">
                <label for="username" class="form-label fs-4">Имя пользователя</label>
                <input type="text" class="form-control fs-4" id="username" style="max-width: 35rem;" required />
                <div class="invalid-feedback">Введите имя пользователя</div>
            </div>
            <div class="mt-4">
                <label for="password" class="form-label fs-4">Пароль</label>
                <input type="password" class="form-control fs-4" id="password" aria-describedby="passHelper" minlenght="8" style="max-width: 35rem;" required />
                <div id="passHelper" class="form-text helper">
                    Добавьте краткое описание проблемы, не более 50 символов
                </div>
                <div class="invalid-feedback">Введите пароль длинной не менее 8 символов</div>
            </div>
            <div class="mt-4">
                <label for="repeatPassword" class="form-label fs-4">Повторите пароль</label>
                <input type="password" class="form-control fs-4" id="repeatPassword" style="max-width: 35rem;" required />
                <div class="invalid-feedback">Повторите пароль</div>
            </div>
            <div class="mt-4">
                <label for="formFile" class="form-label fs-4">Выберите аватар пользователя</label>
                <input class="form-control" type="file" id="formFile" style="max-width: 25rem;">
                <div class="invalid-feedback">Ошибка регистрации. Пользователь с таким email уже существует</div>
            </div>
            <button type="submit" class="btn btn-primary mt-3 fs-4">
                Регистрация
            </button>
        </form>
    </div>
{% endblock %}
